<script setup lang="ts">
import type { ArticleItem, ArticleResData } from '@/types/data';
import axios from 'axios';
import { ref, watch } from 'vue';

const props = defineProps<{
  channelID: number
}>()

const articles = ref<ArticleItem[]>([])

watch(() => props.channelID,
async () => {
  const res = await axios.get<ArticleResData>('http://geek.itheima.net/v1_0/articles', {
    params: {
      channel_id: props.channelID,
      timestamp: Date.now()
    }
  })
  articles.value = res.data.data.results
},
{immediate: true}
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <img class="img" v-if="item.cover.type>0" v-for="(it, i) in item.cover.images" :key="i" :src="it" alt="">
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>